<template>
    <div>
        <!--树结构-->
        <Tree :data="tree" @on-select-change="changeTree" style="position:absolute;top:0;left:0;"></Tree>
        <!--右边的表格-->
        <div style="position:absolute;top:10px;left:100px;margin-left:50px;width:85%;">
            <Button style="margin:0 10px 10px 0" type="primary" @click="modalAdd = true">添加</Button>
            <Button style="margin:0 10px 10px 0" type="error" @click="removes">删除多个</Button>
            <!--搜索框-->
            <Input v-model="filter.title">
                <Button slot="append" icon="ios-search" @click="searchData"></Button>
            </Input>
            <!--表格-->
            <Table ref="selection" @on-selection-change="onSelectionChangeHandler" border :columns="columns" :data="data"></Table>
            <!--分页-->
            <Page :total="total" :page-size="filter.rows" :page-size-opts="[2,4,6,8,10]" @on-page-size-change="onPageSizeChangeHandler" @on-change="onChangeHandler" show-sizer></Page>
            <!--添加修改信息的弹框-->
            <Modal
                v-model="modalAdd"
                title="添加信息框"
                >
                <!--在弹出框里面再加一个表单，用于添加信息的书写-->
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                    <FormItem label="新闻标题" prop="title">
                        <Input v-model="formValidate.title"/></Input>
                    </FormItem>
                    <FormItem label="新闻内容" prop="desc">
                        <Input v-model="formValidate.desc"/></Input>
                    </FormItem>
                </Form>
                <div slot="footer">
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </div>
            </Modal>
        </div>
    </div>
</template>
<script>
import { base } from "../common/base";
export default {
    mixins: [base],
    data() {
        return {
            modules: "news",
            type: 1,
            formValidate: {
                title: "",
                desc: ""
            },
            ruleValidate: {
                title: [{ required: true, message: "新闻标题不能为空", trigger: "blur" }],
                desc: [{ required: true, message: "新闻内容不能为空", trigger: "blur" }]
            }, 
            columns:[
                {//单选框
                    type:'selection',
                    width:60,
                    align:'center'
                },
                {//新闻模块中的新闻标题
                    title: '新闻标题',
                    key: 'title',
                    
                },
                {//新闻模块中的新闻内容
                    title: '新闻内容',
                    key: 'desc', 
                    
                },
                {//新闻模块中的评论数
                    title: '评论数',
                    key: 'numb', 
                    width: 80,
                    render: (h, params) => {
                        return h('div', [
                            h('Icon', {
                                props: {
                                    type: 'person'
                                }
                            }),
                            h('strong', params.row.numb)
                        ]);
                    }
                },
                {//用户模块中的操作（修改和删除）
                    title: '操作',
                    key: 'action',
                    width: 230,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '15px'
                                    },
                                    on: {
                                        click: () => {
                                            this.editData(params.row._id)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '15px'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row._id)//这里的params.row._id就是当前点击的用户信息的id
                                        }
                                    }
                                }, '删除'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            //这里点击按钮时调用路由调到评论界面，顺带把此时点的新闻的id通过地址传到评论界面
                                            this.$router.push({name:'commroutes',query:{newsId:params.row._id}});
                                            //console.log(params.rows)
                                        }
                                    }
                                }, '查看评论')
                            ]);
                    }
                },
            ],
        };
    },
};
</script>